<template>
  <el-dialog v-model="dialogFormVisible" :title="title" @close="closeDialog">
    <el-form :model="addBaseMenuForm" ref="addBaseMenuRef" :rules="addBaseMenurules">
      <section v-if="addBaseMenuForm.level == 1">
        <el-form-item label="系统名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="addBaseMenuForm.name" autocomplete="off" ref="name" placeholder="请填写系统名称"></el-input>
        </el-form-item>
        <el-form-item label="系统代码" :label-width="formLabelWidth" prop="systemCode">
          <el-input v-model="addBaseMenuForm.systemCode" autocomplete="off" ref="name" placeholder="请填写系统代码"></el-input>
        </el-form-item>
        <el-form-item label="权重" :label-width="formLabelWidth" prop="sortNum">
          <el-input v-model="addBaseMenuForm.sortNum" autocomplete="off" ref="name" type="number"
            placeholder="请填写权重"></el-input>
        </el-form-item>
      </section>
      <section v-else>
        <el-form-item label="菜单名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="addBaseMenuForm.name" autocomplete="off" ref="name" placeholder="请填写菜单名称"></el-input>
        </el-form-item>
        <el-form-item label="菜单级别" :label-width="formLabelWidth" prop="level" v-if="addBaseMenuForm.id">
          <el-input v-model="addBaseMenuForm.level" autocomplete="off" ref="name" placeholder="请填写菜单级别"></el-input>
        </el-form-item>
        <el-form-item label="菜单路由" :label-width="formLabelWidth" prop="path">
          <el-input v-model="addBaseMenuForm.path" autocomplete="off" ref="name" placeholder="请填写菜单路由"></el-input>
        </el-form-item>
        <el-form-item label="菜单图标" :label-width="formLabelWidth" prop="icon">
          <el-input v-model="addBaseMenuForm.icon" autocomplete="off" ref="name" placeholder="请填写菜单图标"></el-input>
        </el-form-item>
        <el-form-item label="权重" :label-width="formLabelWidth" prop="sortNum">
          <el-input v-model="addBaseMenuForm.sortNum" autocomplete="off" ref="name" type="number"
            placeholder="请填写权重"></el-input>
        </el-form-item>
        <!-- <el-form-item
        label="系统代码"
        :label-width="formLabelWidth"
        prop="systemCode"
      >
        <el-input
          v-model="addBaseMenuForm.systemCode"
          autocomplete="off"
          ref="name"
          placeholder="请填写系统代码"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="是否有效"
        :label-width="formLabelWidth"
        prop="isEffect"
        v-if="addBaseMenuForm.id"
      >
        <el-input
          v-model="addBaseMenuForm.isEffect"
          autocomplete="off"
          ref="name"
          placeholder="请填写是否有效"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="父菜单id"
        :label-width="formLabelWidth"
        prop="parentId"
        v-if="addBaseMenuForm.id"
      >
        <el-input
          v-model="addBaseMenuForm.parentId"
          autocomplete="off"
          ref="name"
          placeholder="请填写父菜单id"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="层级名称"
        :label-width="formLabelWidth"
        prop="levelName"
      >
        <el-input
          v-model="addBaseMenuForm.levelName"
          autocomplete="off"
          ref="name"
          placeholder="请填写层级名称"
        ></el-input>
      </el-form-item> -->
      </section>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel()">取消</el-button>
        <el-button type="primary" @click="save()">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { ref } from "vue";
import { httpService } from "@/utils/httpService";
import { ElMessage, ElForm } from "element-plus";
import { vxRule } from "@/utils/validator";

export default {
  name: "AddBaseMenu",
  components: { ElForm, ElMessage },
  data() {
    return {
      dialogFormVisible: ref(false),
      formLabelWidth: "120px",
      title: "",
      personnelType: "",
      addBaseMenuForm: {
        name: "",
        level: "",
        path: "",
        icon: "",
        sortNum: "",
        systemCode: "",
        isEffect: "",
        parentId: "",
        levelName: "",
      },
      // 校验规则
      addBaseMenurules: {
        name: vxRule(true, null, "blur"),
        // path: vxRule(true, null, "blur"),
        // icon: vxRule(true, null, "blur"),
        systemCode: vxRule(true, null, "blur"),
        // levelName: vxRule(true, null, "blur"),
      },
    };
  },
  methods: {
    closeDialog() {
      this.clear();
    },
    cancel() {
      this.dialogFormVisible = false;
      this.clear();
    },
    getBaseMenuById(id) {
      httpService("/javaApi/baseMenu/queryById", { id: id }, "get").then(
        (data) => {
          this.addBaseMenuForm = data;
        }
      );
    },
    clear() {
      this.dialogFormVisible = false;
      //清空form
      this.addBaseMenuForm.id = "";
      this.addBaseMenuForm.name = "";
      this.addBaseMenuForm.level = "";
      this.addBaseMenuForm.path = "";
      this.addBaseMenuForm.icon = "";
      this.addBaseMenuForm.sortNum = "";
      this.addBaseMenuForm.systemCode = "";
      this.addBaseMenuForm.isEffect = "";
      this.addBaseMenuForm.parentId = "";
      this.addBaseMenuForm.levelName = "";
    },
    save() {
      this.$refs.addBaseMenuRef.validate((valid) => {
        if (valid) {
          let params = new FormData(); //创建一个form对象,必须是form对象否则后端接受不到数据

          if (this.addBaseMenuForm.level == 1) {
            this.addBaseMenuForm.parentId = 0;
          } else {
          }
          this.addBaseMenuForm.levelName = this.addBaseMenuForm.name;

          params.append("name", this.addBaseMenuForm.name);
          params.append("level", this.addBaseMenuForm.level);
          params.append("path", this.addBaseMenuForm.path);
          params.append("icon", this.addBaseMenuForm.icon);
          params.append("sortNum", this.addBaseMenuForm.sortNum);
          params.append("systemCode", this.addBaseMenuForm.systemCode);
          params.append("isEffect", 0);
          params.append("parentId", this.addBaseMenuForm.parentId);
          params.append("levelName", this.addBaseMenuForm.levelName);

          if (this.addBaseMenuForm.id) {
            params.append("id", this.addBaseMenuForm.id);
            httpService("/javaApi/baseMenu/edit", params, "post").then(
              (data) => {
                if (data.code == 200) {
                  ElMessage.success("修改成功");
                  this.clear();
                  //刷新父组件的数据
                  this.$parent.getBaseMenuList();
                  this.$parent.getTreeData();

                } else {
                  ElMessage.error("修改失败");
                }
              }
            );
          } else {
            httpService("/javaApi/baseMenu/add", params, "post").then(
              (data) => {
                if (data.code == 200) {
                  ElMessage.success("添加成功");
                  this.clear();
                  //刷新父组件的数据
                  this.$parent.getBaseMenuList();
                  this.$parent.getTreeData();

                } else {
                  ElMessage.error("添加失败");
                }
              }
            );
          }
        } else {
          return false;
        }
      });
    },
  },
};
</script>
<style>
.el-dialog__header {
  padding: var(--el-dialog-padding-primary);
  padding-bottom: 10px;
  border-bottom: 1px solid #dedede;
  margin-bottom: 10px;
}
</style>